<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <link rel="stylesheet" href="../libs/css/animate.css">
    <style>

        tr td{
            border:1px solid #ddd;  
        }
        table td{
                border:1px solid #333;
        }
        table{
            width:50%;
            background: orange;
        }
    
        td{
            padding:20px;
            text-align: center;
        }
    
        ul{
            display: flex;
            padding:10px;
            background: pink;
            width:70%;
        }
        li{
            margin:0 10px;
            flex:1;
            padding:20px;
        }
        .sldie-enter-active{
            animation: zoomInDown 1s both;
        }

        .sldie-leave-active{
            animation: zoomOutDown 0.3s both;
        }
    </style>
</head>
<body>
    <div id="app">
        <h2>{{msg}}</h2>
        <myhead ></myhead>
        <hr>
        <parent
            :msg="msg"
            index="2107"
        >
            <!-- html模板 -->
            <div>
                Hello world
            </div>
            <div>
                WH2107-daydayup
            </div>
            <Demo></Demo>
        </parent>

        <parent
            :msg="msg"
            index="2107"
        >
            <template v-slot:banner>
                <h2>Banner1</h2>
                <h2>Banner2</h2>
                <h2>Banner3</h2>
            </template>
        </parent>
        <my-user></my-user>

        <my-user>
            <template v-slot:default="scope">
              age =   {{scope.user.age}}
            </template>
        </my-user>

        <my-user>
            <template v-slot:default="scope">
                word  =   {{scope.user.word}}
                /  {{scope.obj.msg}}
            </template>
        </my-user>
    </div>

    <template id="parent">
        <div>
            <h2>I am parent component </h2>
            <h5>props=== {{msg}} -- {{index}}</h5>
            <hr>
            <div :style="{width:'70%',border:'1px solid #f50',height:'100px'}">
                <slot>如果没有分发的内容 这里就显示这个... </slot>
            </div>
            <div :style="{width:'70%',border:'1px solid #0f0',height:'auto'}">
                <slot name="banner">默认只能接受 banner 的 内容分发 ... </slot>
            </div>
        </div>
    </template>

    <template id="myuser">
        <div>
            <h2>用户在中心 -- user </h2>
            <h3>user - user - user</h3>
            <slot v-bind:user="user" :obj="obj"  > username ==  {{user.username }}</slot>
            <hr>
        </div>
    </template>
    <script>
        
        Vue.component("myhead",{
            template:"<header>wh2107 - 天道酬勤 </header>"
        })

        Vue.component("parent",{
            template:"#parent",
            props:["index","msg"]
        })

        Vue.component("Demo",{
            template:"<h1>Demo - Demo - Demo </h1>"
        })

        Vue.component("my-user",{
            template:"#myuser",
            data(){
                return {
                    user:{
                        username:"zuozuomu",
                        age:18,
                        word:"daydayup"
                    },
                    obj:{
                        msg:"Are you OK"
                    }
                }
            }
        })

        const vm = new Vue({
            data:{
                msg:"组件插槽 slot 内容分发",
                flag:true ,
                cname:"ctable"
            },
            mounted(){
                document.getElementsByTagName("title")[0].innerHTML = this.msg 
            }
        }).$mount("#app")
    </script>
    
     <!-- 
        Vue 实现了一套内容分发的 API slot  将 <slot> 元素作为承载分发内容的出口
        插槽  slot 专门接受 从父组件传递来的 (props+slot ) html模板  内容分发 
        
        父组件给子组件传递数据  props 
        父组件 想给子组件 传递 模板(html标签)   用 slot 来接受 内容分发 模块 
        slot 父组件可以把模板标签 动态分发子组件  子组件放到指定的位置区域 (slot 插槽)

        具名插槽 slot  精准投放  定位   name="a"
        template v-slot=  "a"

        作用域插槽  把子组件的数据通过插槽传递给父组件 由父组件决定显示什么数据      

        以后封装组件   props 70%  slot 30%
    -->

</body>
</html>